<script setup>
/**
 * @import libs
 */
import { storeToRefs } from 'pinia'

/**
 * @import components
 */

/**
 * @import pinia stores
 */

// pinia -> usePetDoctorStaticMessStore
import { usePetDoctorStaticMessStore } from '@/stores/petDoctor/petDoctorStaticMess'

/**
 * @param petDoctorChatAvataAndName 聊天头像
 */
let { petDoctorChatAvataAndName } = storeToRefs(usePetDoctorStaticMessStore())


// pinia -> usePetDoctorPageStore
import { usePetDoctorPageStore } from '@/stores/petDoctor/petDoctorPage.js'

/**
 * @function chatClickAIHead 点击健康顾问头像
 */
const { chatClickAIHead } = usePetDoctorPageStore()

/**
 * 点击健康顾问头像事件
 */
const chatClickAIHeadEvent = () => {
        chatClickAIHead()
}

</script>

<template>
    <div class="top-title-bar">
        <div class="avata-class">
            <image class="avata-image-class" @click.stop="chatClickAIHeadEvent" :src="petDoctorChatAvataAndName.OpponentAvatar" mode="aspectFill" />
        </div>
        <div class="title-class">
            {{ petDoctorChatAvataAndName.OpponentName }}
        </div>
    </div>
</template>

<style scoped>
.top-title-bar {
    width: 750rpx;
    text-align: center;
    color: #c87a17;
    font-size: 30rpx;
    font-family: '黑体';
    font-weight: bold;
}

.avata-class,
.avata-image-class {
    width: 110rpx;
    height: 110rpx;
    border-radius: 50%;
    position: absolute;
    top: 3.8vh;
    left: 50rpx;
}
</style>